<template>
	<view>
		<view class="searchBox pL15 pR15 ">
			<view >
				<u-search placeholder="搜索" v-model="query.oddJobName" height="80" :show-action="false"
					bg-color="#F7F8FB" shape="square" @search="search">
				</u-search>
				
			</view>
			<view class="flex alg-center jst-between mT10">
				<view @click="changeTab(item,i)" class="tabItem font32" :class="curretnTab==i?'active':''"
					v-for="(item,i) in tabLis" :key="i">
					<text class="relative">{{item.text}}</text>
				</view>
			</view>
		</view>
		<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" :bottombar="false" :top="170">
			<view class="pB15 mL15 mR15">
				<view @click="xf.onlineUtils.route(`/pages/common/myJobDetail/index?id=${item.id}&regisId=${item.regisid}&xfOddGeneralId=${userId}&title=报名详情`)" v-for="(item,i) in list" class="oddItem mB15" :key="i">
					<view class="flex alg-center jst-between">
						<view class="txt-ellipsis w75 font18">{{item.oddJobName}}</view>
						<view class=" font15" :class="item.enrollStatus=='5'?'u-red':'u-blue'">
							{{item.enrollStatusText}}
						</view>
					</view>
					<view class="flex font28 mT10">
						<text class="u-8bd labelType">工种类型</text>
						<text class="mL15">{{item.oddJobTypeText}}</text>
					</view>
					<view class="flex font28 mT10">
						<text class="u-8bd labelType">工作时间</text>
						<text class="mL15 font14">{{item.jobBeginDatetime}}-{{item.jobEndDatetime}}</text>
						<!-- <text class="mL15">{{item.jobBeginDatetime}}-{{item.jobEndDatetime}}</text> -->
					</view>
					<view class="flex font28 mT10">
						<text class="u-8bd labelType">报名时间</text>
						<text class="mL15 font14">{{item.enrollTime}}</text>
						<!-- <text class="mL15">{{item.jobBeginDatetime}}-{{item.jobEndDatetime}}</text> -->
					</view>
					<view class="flex jst-between mT10 alg-center">
						<view class="u-red"><text class=" font20">{{item.salary}}</text><text class="font13 let-spc3">元</text></view>
					</view>
				</view>
				
			
			</view>
		</mescroll-uni>
		
	</view>
</template>

<script>
	
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {getLocal} from "@/libs/map.js"
	import {getMybm} from '@/api/userInterface/user.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					use: true,
					auto: false
				},
				query: {
					// longitude: null,
					// latitude: null,
					pageSize: 10,
					enrollStatus:"",
					pageNo: 1
				},
				upOption: {
					page: {
						num: 0,
						size: 5,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: [],
				curretnTab: 0,
				tabLis: [{
					text:"全部",
					value:''
				},{
					text:"已报名",
					value:"0"
				},{
					text:"已拒绝",
					value:"5"
				}],
				userId:"",

			};
		},
		onShow(e) {
			let d=this.xf.onlineUtils.getUserInfo()
			this.userId=d.authStatus==1?d.companyId:d.id
			this.mescroll&&this.mescroll.triggerDownScroll()
		},
		methods: {
			changeTab(v, i) {
				this.curretnTab = i;
				this.query.enrollStatus=(v.value).toString();
				this.search()
			},

			search() {
				
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			async upCallback(page) {
				if (page.num == 1) this.list = [];
				this.query.pageNo=page.num;
				getMybm(this.query).then(res => {
					let list = res.result.records;
					this.list = this.list.concat(list);
					this.mescroll.endSuccess(list.length);
				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(1);
					this.mescroll.endErr();
				})
			},
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		/* #ifdef MP-WEIXIN */
		height: 100%;
		/* #endif */
		background: linear-gradient(0deg, #F7F8FB, #E1EEFF);
	}
</style>
<style scoped lang="scss">
	.oddItem {
		padding: 34rpx 28rpx;
		background: #FFFFFF;
		// box-shadow: 1rpx 0rpx 10rpx 0rpx #000000;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		.labelType{
			width: 120rpx;
		}
	}

	.selImg {
		width: 40rpx;
		height: 40rpx;
	}

	.tabItem {
		margin-right: 58rpx;
		position: relative;

		.relative {
			z-index: 1;
		}

		&:first-child {
			margin-left: 20rpx;
		}

		&:last-child {
			margin-right: 30rpx;
		}

		&.active {
			font-weight: bold;

			&:before {
				content: "";
				position: absolute;
				bottom: 0;
				z-index: 0;
				width: 100%;
				height: 10rpx;
				background: linear-gradient(to right, #3291F8, #E4F1FE);
				border-radius: 2rpx 2rpx 2rpx 2rpx;
			}
		}
	}
</style>